/*
 * @Author: quit
 * @Date: 2023-02-26 20:01:09
 * @LastEditTime: 2023-02-28 06:04:08
 * @Descripttion:
 * @notice:
 */
/**
 * 组件是一个独立且封闭的单元,在默认情况下组件只能使用自己的数据,在项目的组件化中通常会将一些完整的功能拆分成多个组件,以更好的维护和应用;但是在实际使用中多个组件之间会有数据的共享,这是就需要打破组件之间的独立性,这个过程就是组件的通讯
 * props 接收传递给组件的数据; 传递数据: 给标签添加一个属性
 * |--  < 组件名 属性名="传递的值" />    <hello name="mack" />
 * |-- 字符串使用 "" 其他类型数据使用 {} 包裹 可以是数值 数值 对象 函数 JSX 等
 * props的特性
 * |-- 可以给组件传递任意类型的数据
 * |-- Props是只读对象,无法修改对象
 * |-- 在使用类组件时,如果添加了构造函数需要将props作为参数传递给super函数,否则无法在构造函数中获取到props
 */

const Component = (
    <Hello
        name="mack"
        age={19}
        colors={['red', 'green', 'blue']}
        fn={() => {
            console.log('Ok')
        }}
        tag={<div> JSX! </div>}
    />
)

/**
 * 函数组件使用参数进行接收
 * 可以是非props的任意字段(非推荐)
 */
function Hello(props) {
    console.log(props)
    return <div> 接收的数据: {props.name} </div>
}
/**
 * 类组件使用 this.props
 * 在使用类组件时,如果写了构造函数constructor则需要将props传递给super;在constructor中无法获取到props
 */
class Hello extends React.Component {
    constructor(props) {
        super(props)
        console.log(props)
    }

    render() {
        console.log(this.props)
        console.log(this.props.fn())
        return (
            <div>
                <div> 接收到的数据:{this.props.age} </div>
                {this.props.tag}
            </div>
        )
    }
}
